<template>
  <!-- 最外层的一个容器div -->
  <div id="bpp">
    <header></header>
    <!-- 地址栏 -->
    <div class="nav">
      <div class="nav-left">
        <p>雁塔区高新区立人科技园</p>
      </div>
      <div class="nav-right">
        <div class="nav-right-o">
          <van-button round type="info" class="nav-o1">自提</van-button>
          <van-button round type="info" class="nav-o2">外送</van-button>
        </div>
      </div>
    </div>

    <!-- 中间内容区 -->
    <main>
      <div class="main-top">
        <van-notice-bar left-icon="volume-o" :scrollable="false" class="main-top-a">
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
            <van-swipe-item>当季咖啡豆</van-swipe-item>
            <van-swipe-item>开启幸运摩天轮</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
      <!-- 中间菜单 -->
      <div class="main-box">
        <div class="main-left">
          <ul>
            <li>
              <button @click="tem=Menua">人气TOP</button>
            </li>
            <li>
              <button @click="tem=Menub">经典拿铁</button>
            </li>
            <li>
              <button @click="tem=Menuc">大师咖啡</button>
            </li>
            <li>
              <button @click="tem=Menud">经典饮品</button>
            </li>
          </ul>
          <component :is="tem"></component>
        </div>

        <div class="main-right">
          <Menua />
          <Menub />
          <Menuc />
          <Menud />
        </div>
      </div>

      <!-- 最外层的一个容器div -->
    </main>
    <Bbat />
  </div>
</template>

<script>
import Menua from "@/components/menu/menua.vue";
import Menub from "@/components/menu/menub.vue";
import Menuc from "@/components/menu/menuc.vue";
import Menud from "@/components/menu/menud.vue";
export default {
  data() {
    return {
      tem: Menua
    };
  },
  components: {
    Menua,
    Menub,
    Menuc,
    Menud
  },
  created() {
    // 使用vuex发送异步请求-----》dispatch()触发actions发送异步
    this.$store.dispatch("menuData", { url: "/data/tuijian" });
  },
  mounted() {
    // this.data = this.$store.state.menum.data
    // console.log(this.$store.state.menum.data,2)
  }
};
</script>
<style>
html,
body {
  height: 100%;
}
#app {
  height: 100%;
}
</style>
<style>
#bpp {
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 0.22rem;
  background-color: #3136ab;
  /* border: 1px solid red; */
}
.nav {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  background-color: #3136ab;
  /* border: 1px solid yellow; */
}
.nav-left {
  width: 2.53rem;
  height: 100%;
  /* border: 1px solid pink; */
}
.nav-left > p {
  color: white;
  font-size: 0.16rem;
  text-align: center;
  line-height: 0.8rem;
}
.nav-right {
  width: 1.22rem;
  height: 0.8rem;
  /* border: 1px solid orchid; */
}
.nav-right .nav-right-o {
  width: 1.12rem;
  height: 0.25rem;
  margin: 0.27rem auto;
  background-color: #575cb9;
  /* border: 1px solid gray; */
  border-radius: 0.2rem;
  justify-content: space-between;
}
.nav-right .nav-o1 {
  width: 0.56rem;
  height: 0.25rem;
  color: gray;
  background-color: white;
  font-size: 0.1rem;
}
.nav-right .nav-o2 {
  width: 0.56rem;
  height: 0.25rem;
  font-size: 0.1rem;
  /* background-color: purple; */
}
main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* overflow: auto; */
  /* border: 1px solid gainsboro; */
  /* border: 1px solid rgb(202, 15, 15); */
  border-radius: 5% 5% 0px 0px;
  overflow: hidden;
}
.main-top {
  width: 100%;
  height: 0.47rem;
  border-bottom: 1px solid gainsboro;
}
.main-top .main-top-a {
  margin: 0.05rem auto;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.main-box {
  width: 100%;
  height: 100%;
  border-top: 0.05rem solid gainsboro;
  display: flex;
  justify-content: space-between;
}
.main-box .main-left {
  width: 20%;
  height: 100%;
  background-color: gainsboro;
}
.main-box .main-left > ul {
  width: 100%;
  height: 100%;
}
.main-box .main-left > ul > li {
  width: 100%;
  height: 0.5rem;
  font-size: 0.14rem;
  color: gray;
  text-align: center;
  line-height: 0.5rem;
  /* border: 1px solid rgb(128, 118, 118);  */
}
.main-box .main-left > ul > li > button {
  width: 100%;
  height: 0.5rem;
  border: 0;
}
.main-box .main-left > ul > li > button:hover {
  background-color: white;
  color: black;
}

.main-box .main-right {
  width: 80%;
  height: 100%;
  overflow: auto;
  margin-left: 0.12rem;
}
</style>
